<template>
  <div class="box">
    <a-row class="login">
        <a-col :span="8" :offset="8" class="login-main">
        <h1 style="text-align: center">12306自助售票系统</h1>
        <a-form
            :model="loginForm"
            name="basic"
            autocomplete="off"
        >
            <a-form-item
                label=""
                name="mobile"
                :rules="[{ required: true, message: '请输入手机号' }]"
            >
            <a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
            </a-form-item>

            <a-form-item
                label=""
                name="code"
                :rules="[{ required: true, message: '请输入验证码' }]"
            >
            <a-input v-model:value="loginForm.code" placeholder="验证码" >
                <template #addonAfter>
                <a @click="sendCode">获取验证码</a>
                </template>
            </a-input>
            </a-form-item>

            <a-form-item>
            <a-button type="primary" block @click="login">登录</a-button>
            </a-form-item>

        </a-form>
        </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import axios from 'axios';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import store from "@/store";

export default defineComponent({
  name: "login-view",
  computed: {
  },
  setup() {
    const router = useRouter();

    const loginForm = reactive({
      mobile: '',
      code: '',
    });

    const sendCode = () => {
      axios.post("/member/member/sendCode", {
        mobile: loginForm.mobile
      }).then(response => {
        let data = response.data;
        if (data.code === 200) {
          message.success(data.message);
          loginForm.code = "8888";
        } else {
          message.error(data.message);
        }
      });
    };

    const login = () => {
      axios.post("/member/member/login", loginForm).then((response) => {
        let data = response.data;
        if (data.code === 200) {
          message.success(data.message);
          router.push("/");
          store.commit('setMember', data.data);
        } else {
          message.error(data.message || '登录失败' );
        }
      })
    };

    return {
      loginForm,
      sendCode,
      login
    };
  },
});
</script>

<style>
.box {
    background-image: url("../assets/images/login-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    position: relative;  /* 设置父容器为相对定位 */
}

.login-main {
    position: absolute;  /* 设置登录框为绝对定位 */
    top: 50%;           /* 距离顶部50% */
    left: 40%;          /* 距离左侧40% */
    transform: translate(-50%, -50%);  /* 微调位置，使登录框中心对齐 */
    padding: 30px 30px 20px;
    border: 2px solid grey;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 400px;       /* 可以根据需要调整宽度 */
    box-sizing: border-box;
}

.login-main h1 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;  /* 居中对齐标题 */
}
</style>
